<template>
  <el-drawer
    :wrapper-closable="false"
    :title="title"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] pb-[68px] pl-[16px] pr-[4px]">
      <div class="flex min-h-0 flex-1 flex-col space-y-[24px]">
        <div>
          <div class="common-secondary-bg">
            <div class="common-secondary-title"></div>
            部门基本信息
          </div>
          <el-form
            ref="form"
            class="h-full"
            :model="detail"
            :rules="formRules"
            label-suffix="："
            size="small"
            status-icon
            label-width="96px"
            label-position="right"
          >
            <div class="flex w-full justify-between">
              <el-form-item :label="LABELS.departmentName" class="w-full" :prop="PROPS.departmentName">
                <el-input v-model.trim="detail[PROPS.departmentName]" :placeholder="LABELS.departmentName" clearable />
              </el-form-item>
            </div>
            <div class="flex w-full justify-between">
              <el-form-item :label="LABELS.superiorDepartment" class="w-full" :prop="PROPS.superiorDepartment">
                <el-cascader
                  v-model="detail[PROPS.superiorDepartment]"
                  clearable
                  class="w-full"
                  :placeholder="LABELS.superiorDepartment"
                  :options="departmentList"
                  :props="{ expandTrigger: 'hover', label: 'name', value: 'id', checkStrictly: true }"
                  popper-class="popper-custom"
                  @change="handleChangeDepartment"
                ></el-cascader>
              </el-form-item>
            </div>
            <div class="flex justify-between">
              <el-form-item :label="LABELS.contacts" :prop="PROPS.contacts" class="w-full">
                <el-input v-model.trim="detail[PROPS.contacts]" :placeholder="LABELS.contacts" clearable />
              </el-form-item>
            </div>
            <div class="flex justify-between">
              <el-form-item :label="LABELS.phoneNumber" :prop="PROPS.phoneNumber" class="w-full">
                <el-input v-model.trim="detail[PROPS.phoneNumber]" :placeholder="LABELS.phoneNumber" clearable />
              </el-form-item>
            </div>
            <div class="flex justify-between">
              <el-form-item :label="LABELS.status" class="w-full">
                <el-select v-model="detail[PROPS.status]" :placeholder="LABELS.status" class="w-full" clearable>
                  <el-option
                    v-for="item in $store.state.data.OPTION_MAP[OPTION_KEYS.status]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button v-if="title !== '查看'" class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import { clone } from "xe-utils";
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import formAddUpdata from "@/mixin/form-add-updata";
import { systemDepartmentDetail, systemDepartmentList } from "@/api/department";
import { convertToTree } from "@/util";

export default {
  name: "DetailDrawer",
  components: {},
  mixins: [vModelMixin, formAddUpdata],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    title: {
      type: [String],
      required: true,
    },
  },
  data() {
    return {
      detail: {},
      ...config,
      formRules: {},
      superiorDepartmentList: [],
      departmentList: [],
    };
  },
  computed: {},
  methods: {
    handleChangeDepartment(value) {
      this.detail[this.PROPS.superiorDepartment] = value[value.length - 1];
    },
    async getDepartmentList() {
      const { content } = await systemDepartmentList({ pageIndex: 1, length: 999 });
      content.map((item) => (item.parentId ? "" : (item.parentId = null)));
      this.departmentList = convertToTree(content);
    },
    addRules(arr) {
      arr.forEach((item) => {
        this.$set(this.formRules, item, [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确手机号", trigger: "blur" }]);
      });
    },
    async onDrawerOpen() {
      this.initDraw();
      this.getDepartmentList();
      if (this.title == "编辑") {
        const data = await systemDepartmentDetail({ id: this.id });
        this.detail = { ...data };
      }
      this.addRulesMixin([this.PROPS.departmentName]);
      this.addRules([this.PROPS.phoneNumber]);
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = clone(this.detail);
          this.deletParam(data);
          this.$emit("onSubmit", data);
        } else {
          return false;
        }
      });
    },
    initDraw() {
      this.initDrawMixin();
    },
    onDrawerClosed() {},
  },
};
</script>

<style lang="scss" scoped></style>
